import styled from 'styled-components'
import deleteImg from '@img/icon-delete.png'
import closeImg from '@img/close-icon.png'

export const StyledWrap = styled.div`
	width: 600px;
	margin-left: 20px;
	.top-title {
		display: flex;
		justify-content: space-between;
		padding-top: 3px;
		.add-area {
			color: #007ac0;
			font-weight: bolder;
			text-decoration: underline;
			cursor: pointer;
		}
	}
	.middle-title {
		display: flex;
		justify-content: space-between;
	}
	.criterion-wrap {
		border: 1px solid #d4d4d4;
		height: 170px;
		margin: 10px 0;
		overflow: auto;
		.area-wrap {
			display: flex;
			align-items: center;
			height: 32px;
			margin: 8px 0 0 5px;
			.area-select {
				margin: 0 8px;
			}
		}
		.more {
			color: #007ac0;
			text-decoration: underline;
			cursor: pointer;
		}
	}

	.recommend-result {
		margin-top: 10px;
		border: 1px solid #d4d4d4;
	}
	.btns {
		justify-content: center;
		position: absolute;
		bottom: 20px;
		left: 0;
		width: 100%;
	}
`
export const StyledMorePanel = styled.div`
	width: 382px;
	height: 144px;
	background: #fff;
	border: 1px solid #000;
	padding: 0 16px;
	border-radius: 6px;
	.top {
		height: 40px;
		line-height: 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ececec;
	}
	.num {
		padding-left: 30px;
		line-height: 38px;
		.option {
			padding: 3px 5px;
			margin-right: 10px;
			cursor: pointer;
			&.select {
				border: 1px solid #2e7d82;
			}
		}
	}
	.equipment {
		display: flex;
		align-items: center;
		padding-left: 30px;
		height: 24px;
		padding-bottom: 6px;
	}
	.btns {
		justify-content: center;
	}
`

export const DeleteIcon = styled.span`
	display: inline-block;
	height: 18px;
	width: 18px;
	margin-left: 10px;
	cursor: pointer;
	background-image: url(${deleteImg});
`
export const CloseIcon = styled.span`
	display: inline-block;
	height: 23px;
	width: 23px;
	margin-left: 10px;
	cursor: pointer;
	background-image: url(${closeImg});
	background-position: 0 0;
	&:hover {
		background-position: -23px 0;
	}
	&:active {
		background-position: -46px 0;
	}
`
